// 这个配置通过组织路由和懒加载视图组件，使得应用的每个部分仅在需要时才加载，从而优化性能和用户体验。同时，通过children属性在Layout组件下嵌套多个子路由，实现了一个具有层次的导航结构。
// 引入Vue Router的创建函数和Web历史API
import { createRouter, createWebHistory } from 'vue-router'
// 引入布局组件，通常是一个包含顶部导航、侧边栏的通用布局框架
import Layout from "../layout/Layout";

// 定义应用的路由数组
const routes = [
  {
    path: '/', // 路由路径
    name: 'Layout', // 路由名称
    redirect:"user", // 访问根路径时重定向到/user
    component: Layout, // 此路由的组件
    children:[ // 子路由数组
      {
        path:'user', // 用户管理页面路径
        name:'user', // 路由名
        component:() => import("@/views/User") // 懒加载用户管理页面组件
      },
      {
        path: 'book', // 书籍管理页面路径
        name: 'book', // 路由名
        component: () => import("@/views/Book") // 懒加载书籍管理页面组件
      },
      {
        path: 'person', // 个人信息页面路径
        name: 'Person', // 路由名
        component: () => import("@/views/Person") // 懒加载个人信息页面组件
      },
      {
        path: 'password', // 密码修改页面路径
        name: 'Password', // 路由名
        component: () => import("@/views/Password") // 懒加载密码修改页面组件
      },
      {
        path: 'lendrecord', // 借阅记录管理页面路径
        name: 'LendRecord', // 路由名
        component: () => import("@/views/LendRecord") // 懒加载借阅记录页面组件
      },
      {
        path:'dashboard', // 仪表盘页面路径
        name:'Dashboard', // 路由名
        component:() => import("@/views/Dashboard") // 懒加载仪表盘页面组件
      },
      {
        path: 'bookwithuser', // 与用户关联的书籍管理页面路径
        name: 'BookWithUser', // 路由名
        component: () => import("@/views/BookWithUser") // 懒加载与用户关联的书籍管理页面组件
      }
    ]
  },
  {
    path: '/login', // 登录页面路径
    name: 'Login', // 路由名
    component: () => import("@/views/Login") // 懒加载登录页面组件
  },
  {
    path: '/register', // 注册页面路径
    name: 'Register', // 路由名
    component: () => import("@/views/Register") // 懒加载注册页面组件
  },
]

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), // 使用Web历史API和基本URL
  routes // 路由配置
})

// 导出路由器实例，以便在其他地方使用它
export default router
